<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>查看客户详情</title>
	<link rel="stylesheet" href="/static/wework/h5/layui/layui.css">
	<style type="text/css">
		body{
			background: #e9e9e9;
		}
		/*公共头部带搜索*/
		.public_container{
			margin: 20px;
			background: #fff;
		}
		.public_title_container{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
			justify-content: space-between;
		}
		.public_title_container a{
			color: #2f54eb;
			cursor: pointer;
		}
		.public_buttonSearch_container{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			background: #fff;
		}
		.public_Search_container{
			position: relative;
		}
		.public_Search_container input{
			width: 240px;
			height: 32px;
		}
		.public_Search_container i{
			position: absolute;
			bottom: 6px;
			right: 10px;
			cursor: pointer;
		}
		/*公共头部带搜索 end*/
		/*.public_table_container{
			padding: 0 20px 20px 20px;
		}*/
		.public_Search_content{
			display: flex;
		}
		.public_SearchSelect_content input{
			height: 32px;
		}
		.public_SearchSelect_content{
			margin-right: 10px;
		}
		.public_buttonSearch_content{
			display: flex;
			align-items: center;
			padding: 0 15px;
		}
		.public_buttonSearch_content a{
			color: #fff;
			background-color: #2f54eb;
			text-shadow: 0 -1px 0 rgba(0,0,0,.12);
			height: 24px;
			padding: 4px 15px;
			font-size: 14px;
			border-radius: 2px;
			display: flex;
			align-items: center;
		}
		.public_buttonSearch_content span{
			color: rgba(0,0,0,0.65);
			background-color: #fff;
			height: 32px;
			padding: 4px 15px;
			font-size: 14px;
			border-radius: 2px;
			display: flex;
			align-items: center;
			border: 1px solid #d9d9d9;
			margin-left: 10px;
		}
		.public_buttonSearch_content p{
			font-size: 14px;
		}
		.public_buttonSearch_content p:first-child{
			color: rgba(18, 18, 22, 0.85);
			font-weight: 600;
		}
		.public_buttonSearch_content b{
			height: 14px;
			background: #cdcdcd;
			width: 1px;
			margin: 0 8px;
		}
		.public_tips_container{
			background: #fff7f0;
			margin: 20px 20px 0 20px;
			padding: 15px 20px;
			font-size: 14px;
			letter-spacing: 1px;
			text-align: justify;
		}
		.public_tips_container p{
			color: #b5692d;
		}
		.public_tips_container p a{
			color: #1890ff;
		}
		@media screen and (max-width: 500px) {
		 	body{
		 		background: none;
		 	}
		    .public_container {
		 
		        margin: 0;
		 
		    }
		 	.public_SearchSelect_content{
		 		width: 120px;
		 	}
			.layui-table td, .layui-table th{
				font-size: 10px;
			}
			.public_title_container{
				display: none;
			}
			.public_tips_container{
				font-size: 10px;
				padding: 15px;
			}
			.mobileTable_tr{
				background-color: #effaff !important;
			}
	</style>
</head>
<body>
	<form class="layui-form">
	<div class="public_tips_container">
			<p>管理员给你分配了{$count}个好友,快去复制电话号码添加客户吧,管理员在后台可查看添加状态哦</p>
		</div>
	<div class="public_container">
		<!-- /*公共头部带搜索*/ -->
		<div class="public_content">
			<div class="public_title_container">
				<p>查看客户详情</p>
			</div>
			<div class="public_buttonSearch_container">
				
				
				<div class="public_Search_content" >
					<div class="public_SearchSelect_content" >
						<div class="layui-input-inline">
							<select name="status" lay-filter="status" lay-verify="required" >
								<option value="">添加状态</option>
								<option value="0" {if $status==0}selected{/if}>未成功添加</option>
								<option value="1" {if $status==1}selected{/if}>已成功添加</option>
							</select>
						</div>
					</div>
				</div>
				<div class="public_Search_container">
					<input type="text" id="phone" value="{$phone}" placeholder="请输入手机号进行搜索" autocomplete="off" class="layui-input" >
					<button type="button" onclick="check()" style="float: right;border: none;"><i class="layui-icon layui-icon-search"></i></button>
				</div>
			</div>
			<div class="public_buttonSearch_content">
				<p>共({$count})个客户</p>
			</div>
		</div>
		</form>
		<!-- /*公共头部带搜索*/ end -->
		<!-- 公共表格部分 -->
		<div class="public_table_container">
			<table class="layui-table" >
			  <colgroup>
			      <col>
			      <col>
			      <col>
			      <col>
			      <col>
			    </colgroup>
			    <thead>
			      <tr class="mobileTable_tr">
			        <th>客户电话</th>
			        <th>添加状态</th>
			        <th>标签</th>
			        <th>备注</th>
			        <th>操作</th>
			      </tr> 
			    </thead>
			    <tbody>
				{foreach $data as $r}
				  <tr>
			        <td>{$r["phone"]}</td>
			        <td>{$r["add_status"]?'已添加成功':'未添加成功'}</td>
			        <td>
			        	{foreach $tags as $tag}
			        		<span class="layui-badge-rim lm-table-tag" style="font-size: 10px;"> {$tag}&nbsp;</span>
			        	{/foreach}
			        </td>
			        <td>{$r["remarks"]}</td>
			        <td>
			        	<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="copyToClip('{$r['phone']}')">复制</button>
			        </td>
			      </tr>
				{/foreach}
			    </tbody>
			</table>
		</div>
		<!-- 公共表格部分 end-->
	</div>
	
	<script src="/static/wework/h5/js/jquery.js"></script>
	<script src="/static/wework/h5/layui/layui.js"></script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="https://fastly.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
    <script type="text/javascript">
        function navigateToAddCustomer(){
        	wx.config({
	            beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
	            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	            appId: "{$wxConfig['appId']}", // 必填，企业微信的corpID
	            timestamp: "{$wxConfig['timestamp']}", // 必填，生成签名的时间戳
	            nonceStr: "{$wxConfig['nonceStr']}", // 必填，生成签名的随机串
	            signature: "{$wxConfig['signature']}",// 必填，签名，见 附录-JS-SDK使用权限签名算法
	            jsApiList: ['navigateToAddCustomer'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
	        });
	        wx.ready(function(){
	            wx.agentConfig({
	                corpid: "{$corp_id}", // 必填，企业微信的corpid，必须与当前登录的企业一致
	                agentid: "{$agent_id}", // 必填，企业微信的应用id （e.g. 1000247）
	                timestamp: "{$agentConfig['timestamp']}", // 必填，生成签名的时间戳
	                nonceStr: "{$agentConfig['nonceStr']}", // 必填，生成签名的随机串
	                signature: "{$agentConfig['signature']}",// 必填，签名，见附录-JS-SDK使用权限签名算法
	                jsApiList: ['navigateToAddCustomer'], //必填
	                success: function(res) {
	                    console.log('agentConfig success');
	                    wx.checkJsApi({
	                        jsApiList: ['navigateToAddCustomer'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
	                        success: function(res) {
	                        	wx.invoke('navigateToAddCustomer', 
					                 {},
					                 function(r) {
					             });
	                        }
	                    });
	                },
	                fail: function(res) {
	                    if(res.errMsg.indexOf('function not exist') > -1){
	                        console.log('版本过低请升级')
	                    }
	                }
	            });
	        });
        }

        function isQyweixin(){
            //判断当前入口是PC端还是APP端
             let flag = navigator.userAgent.match(
                    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
                )==null?false:true;
                // return flag?is_weixin()?"来自于APP端企业微信":"":is_weixin()?"来自于PC端的企业微信":"来自于PC端浏览器";
                return flag?is_weixin()?true:false:is_weixin()?false:false;
        }
        function is_weixin(){
             //判断是在企业微信打开 还是 在浏览器打开
             return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
        }
    </script>
	<script type="text/javascript">
		layui.use('form', function(){
		  var form = layui.form;
		  	
		  //监听提交
		  form.on('submit(formDemo)', function(data){
		    layer.msg(JSON.stringify(data.field));
		    return false;
		  });
		  form.render('select');
		  form.on('select(status)', function(data){
			location.href = location.href+"&status="+data.value;
		  });
		});
		
		function check(){
		    var phone = $("#phone").val();
		    location.href = location.href+"&phone="+phone;
		}
	</script>
	<script type="text/javascript">
		function copyToClip(content, message) {
			var aux = document.createElement("input"); 
			aux.setAttribute("value", content); 
			document.body.appendChild(aux); 
			aux.select();
			document.execCommand("copy"); 
			document.body.removeChild(aux);
			if (message == null) {
				layer.msg("复制成功");
				if(!isQyweixin()){
	                alert('自动跳转到添加客户页面仅企业微信移动端app可用');
	                return;
	            }
				navigateToAddCustomer();
			} else{
				layer.msg(message);
			}
		}
	</script>
</body>
</html>